<script lang="ts" setup>
	import { computed } from 'vue';

	interface Props {
		outline ?: boolean
	}

	const props = defineProps<Props>()

	const classNames = computed(() => {
		const list = [];
		if (props.outline) {
			list.push('x-tag-outline')
		}
		return list
	})
</script>

<template>
	<view class="x-tag" :class="classNames">
		<slot></slot>
	</view>
</template>

<style lang="scss" scoped>
	.x-tag {
		display: inline-block;
		background-color: #FA5732;
		padding: 6rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #fff;

		&-outline {
			background-color: transparent;
			border: 1px solid #FA5732;
			color: #FA5732;
		}
	}
</style>